<template>
    <el-row type="flex" justify="center" align="middle" style="width: 100%;">
        <el-col :span="24">
            <el-row class="header_home" justify="space-between">
                <el-image style="width: auto; height: auto;" :src="imgUrl" />
                <el-input v-model="commodityName" style="width: 50%;height: 50%;" placeholder="搜索商品..." size="large">
                    <template #append>
                        <el-button :icon="Search" @click="searchCommodityByName" />
                    </template>
                </el-input>
                <el-link v-show="!isLogin"
                    style="color: white;font-size: large; background-color: #fbaf5a;margin-right: 20px;"
                    :underline="false" @click="login">
                    登录
                </el-link>
                <el-menu v-show="isLogin"
                    style="background-color: transparent;border-bottom: none;text-decoration: none;" mode="horizontal"
                    :ellipsis="false" background-color="#fbaf5a" text-color="#ffffff">
                    <el-sub-menu style="background-color: #fbaf5a;">
                        <template #title>
                            <el-image style="height: 55px;width: 55px;border-radius: 50px;margin-right: 10px;"
                                :src="imageUrl" />
                            <el-text>{{ userStore.username }}</el-text>
                        </template>
                        <el-menu-item @click="informationClick">个人信息</el-menu-item>
                        <el-menu-item @click="logoutClick">退出登录</el-menu-item>
                    </el-sub-menu>
                </el-menu>
            </el-row>
        </el-col>
        <el-col :span="24">
            <el-carousel height="400px">
                <el-carousel-item v-for="item in images" :key="item.iid">
                    <el-image :src="`/api/image/${item.url}`" fit="cover" />
                </el-carousel-item>
            </el-carousel>
        </el-col>
        <el-col :span="24">
            <el-row style="width: 100%;" justify="center" align="middle">
                <el-col :span="22" style="font-size: larger;" class="kind_body">
                    <div v-for="item in commodityItems" :key="item.kind">
                        <el-col style="padding: 10px;">
                            <el-row type="flex" justify="center" align="middle" style="width: 100%;">
                                <el-col :span="2">
                                    <el-text style="font-size: large;font-weight: bolder;">
                                        {{ item.kind }}
                                    </el-text>
                                </el-col>
                                <el-col :span="22">
                                    <el-space wrap :spacer="spacer">
                                        <div v-for="i in item.arr" :key="i.index">
                                            <el-link style=" font-size: medium;"
                                                @click="searchCommodityByType(i.content)">
                                                {{ i.content }}
                                            </el-link>
                                        </div>
                                    </el-space>
                                </el-col>
                            </el-row>
                        </el-col>
                    </div>
                </el-col>
            </el-row>
        </el-col>
        <el-col :span="22">
            <el-divider content-position="left">
                <el-text style="font-size: x-large;font-weight: bold;">
                    新品上市
                </el-text>
            </el-divider>
        </el-col>
        <el-col :span="22" style="margin-top: 2%;">
            <el-space wrap :fill-ratio="fillRatio" fill style="width: 100%;">
                <div v-for="i in commodities" :key="i.gid">
                    <el-card shadow="hover" style="width: 250px;height: 400px;border-radius: 15px;margin-top: 5%;"
                        @click="goCommodity(i.gid!)">
                        <el-row align="middle" justify="center">
                            <el-col :span="24">
                                <el-image :src="`/api/image/${i.image?.url}`" style="width: 100%;height: 200px;"
                                    fit="contain" />
                            </el-col>
                            <el-col :span="24" align="start">
                                <el-text style="font-size: larger;" line-clamp="1">{{ i.commodityName }}</el-text>
                            </el-col>
                            <el-col :span="24" align="start">
                                <el-text style="color: gray;height: 60px;" line-clamp="3">{{ i.description }}</el-text>
                            </el-col>
                            <el-col :span="24" align="end">
                                <el-text style="color: red;font-size: large;">¥ {{ i.price }}</el-text>
                            </el-col>
                            <el-col :span="24" style="margin-top: 5%;">
                                <el-row style="width: 100%;">
                                    <el-col :span="24" align="start">
                                        <el-text>浏览量：{{ i.browse }}</el-text>
                                        <el-text style="margin-left: 10%;">评分：{{ i.point }}</el-text>
                                    </el-col>
                                </el-row>
                            </el-col>
                        </el-row>
                    </el-card>
                </div>
            </el-space>
        </el-col>
        <el-col :span="22" style="margin-top: 2%;">
            <el-divider content-position="left">
                <el-text style="font-size: x-large;font-weight: bold;">
                    甄选推荐
                </el-text>
            </el-divider>
        </el-col>
        <el-col :span="22" style="margin-bottom: 5%;">
            <Commodities />
        </el-col>
        <el-backtop :bottom="100" :right="20" style="
        height: 50px;
        width: 50px;
        background-color: #fbaf5a;
        box-shadow: var(--el-box-shadow-lighter);
        text-align: center;
        line-height: 30px;
        color: #ffffff;
        border-radius: 50px;
      ">
        </el-backtop>
    </el-row>
</template>


<script lang="ts" setup>
import { ref, h, onMounted } from 'vue';
import { Search } from '@element-plus/icons-vue';
import { ElDivider, ElNotification } from 'element-plus';
import { commodityItems } from '../assets/common/constants.ts';
import Commodities from '../components/Commodities.vue';
import { imgUrl } from '../assets/common/constants.ts';
import { agcAuth } from '../assets/agc/auth.ts';
import { userInfoStore } from '../assets/userStore/userStore.ts';
import { useRouter } from 'vue-router';
import { queryCurrentCommodity, queryRecommendImage, queryUser } from '../assets/net/NetUtils.ts';
import { ImageModel } from '../assets/model/Image.ts';
import { CommodityModel } from '../assets/model/Commodity.ts';
import { UserModel } from '../assets/model/User.ts';


const userStore = userInfoStore()
const router = useRouter();
const spacer = h(ElDivider, { direction: 'vertical' })
const isLogin = ref<boolean>(false)
const fillRatio = ref<number>(15)
const commodityName = ref<string>()
const images = ref<Array<ImageModel>>()
const commodities = ref<Array<CommodityModel>>()
const imageUrl = ref<string>()

onMounted(() => {
    agcAuth.getCurrectUser()
        .then(async (user) => {
            isLogin.value = user === null ? false : true;
            if (user) {
                let mine: UserModel = await queryUser(userStore.phoneNumber)
                userStore.update(user.getUid(), mine.username, mine.phoneNumber, mine.image?.url)
                imageUrl.value = mine.image === null ? 'src/assets/resource/ic_user_portrait.svg' : `/api/image/${mine.image?.url}`;
                ElNotification({
                    title: '登陆成功',
                    message: `亲爱的${userStore.username},欢迎回来`,
                    type: 'success',
                })
            }
        })

    queryRecommendImage()
        .then((value) => {
            images.value = value.data
            queryCurrentCommodity()
                .then((value) => {
                    commodities.value = value.data
                })
        })
})
const login = () => {
    router.push('/login')
}
const goCommodity = (gid: number) => {
    router.push({
        path: '/commodity',
        query: {
            gid: gid
        }
    })
}
const searchCommodityByName = () => {
    router.push({
        path: '/search',
        query: {
            way: 0,
            arg: commodityName.value
        }
    })
}

const searchCommodityByType = (type: string) => {
    router.push({
        path: '/search',
        query: {
            way: 1,
            arg: type
        }
    })
}

const logoutClick = () => {
    agcAuth.logOut();
    location.reload();
}

const informationClick = () => {
    router.push('/profile')
}
</script>
<style>
.header_home {
    width: 100%;
    height: 90px;
    background-color: #fbaf5a;
    align-items: center;
}

.kind_body {
    padding: 5%;
}
</style>